<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片</title>
  </head>
  <body>
    <!-- 
        img图片标签,用来在网页中显示图片
          必须属性
          src     图片资源的路径,可以是本地图片,也可以是远程地址
            图片格式 jpg,png,gif,ico,webp...
            图片路径 相对路径
                    .表示当前路径
                    ..表示上一级路径

          可选属性
          width   图片宽度  数值/百分比
          height  图片高度  数值/百分比

          注意: 一般设置图片时,只需要设置一边即可,另外一边会自动计算适配(自动维持高宽比),防止出现图片变形
          注意: 当使用百分比时,表示图片占用父级容器的百分比,如果没有父级容器,则表示占用浏览器显示区域的百分比

          alt     图片显示异常时,替换显示的内容
          title   鼠标悬停在图片上时显示的说明文字
     -->
    <img src="img/iu.webp" width="400" alt="iu" title="iu" />

    <!-- 使用远程地址显示图片 -->
    <img
      width="400"
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F780da623-6677-4902-a061-40401ad5523a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1697696063&t=8d6a2ca8ed4746e08abb5cafc3ea83e8"
    />
  </body>
</html>
